<template>
	<view class="member-card">
		<view class="header">
			<text class="title">会员卡</text>
		</view>
		
		<view class="card-container">
			<view class="member-card-item" :style="{ background: cardStyle.background }">
				<view class="card-header">
					<text class="card-name">{{ memberCard.name }}</text>
					<text class="card-type">{{ memberCard.type }}</text>
				</view>
				<view class="card-balance">
					<text class="balance-label">余额</text>
					<text class="balance-amount">¥{{ memberCard.balance }}</text>
				</view>
				<view class="card-number">
					<text>卡号：{{ memberCard.cardNumber }}</text>
				</view>
				<view class="card-validity">
					<text>有效期至：{{ memberCard.validDate }}</text>
				</view>
			</view>
		</view>
		
		<view class="card-actions">
			<button class="action-btn recharge" @click="recharge">
				<text class="icon">💰</text>
				<text>充值</text>
			</button>
			<button class="action-btn transfer" @click="transfer">
				<text class="icon">🔄</text>
				<text>转账</text>
			</button>
			<button class="action-btn records" @click="viewRecords">
				<text class="icon">📊</text>
				<text>交易记录</text>
			</button>
		</view>
		
		<view class="benefits-section">
			<text class="section-title">会员权益</text>
			<view class="benefits-grid">
				<view v-for="benefit in benefits" :key="benefit.id" class="benefit-item">
					<text class="benefit-icon">{{ benefit.icon }}</text>
					<text class="benefit-name">{{ benefit.name }}</text>
					<text class="benefit-desc">{{ benefit.description }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

const memberCard = ref({
	name: '至尊会员卡',
	type: 'VIP卡',
	balance: 1288.50,
	cardNumber: '8888 6666 3333 1111',
	validDate: '2025-12-31'
})

const benefits = ref([
	{ id: 1, icon: '🎁', name: '生日特权', description: '生日当天享8折优惠' },
	{ id: 2, icon: '⭐', name: '积分加倍', description: '消费积分双倍累计' },
	{ id: 3, icon: '🚚', name: '优先配送', description: '订单优先处理配送' },
	{ id: 4, icon: '💎', name: '专属客服', description: '24小时专属客服' },
	{ id: 5, icon: '🎯', name: '新品体验', description: '优先体验新品' },
	{ id: 6, icon: '📱', name: '线上特权', description: '线上专享优惠' }
])

const cardStyle = computed(() => {
	return {
		background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
	}
})

const recharge = () => {
	uni.navigateTo({
		url: '/pages_my/balance/index'
	})
}

const transfer = () => {
	uni.showToast({
		title: '转账功能开发中',
		icon: 'none'
	})
}

const viewRecords = () => {
	uni.showToast({
		title: '查看交易记录',
		icon: 'none'
	})
}
</script>

<style scoped>
.member-card {
	background: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.header {
	text-align: center;
	padding: 30rpx 0;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.card-container {
	margin-bottom: 40rpx;
}

.member-card-item {
	border-radius: 20rpx;
	padding: 40rpx;
	color: white;
	box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.3);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.card-name {
	font-size: 32rpx;
	font-weight: bold;
}

.card-type {
	background: rgba(255, 255, 255, 0.2);
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 20rpx;
}

.card-balance {
	text-align: center;
	margin-bottom: 30rpx;
}

.balance-label {
	font-size: 24rpx;
	opacity: 0.8;
	display: block;
	margin-bottom: 10rpx;
}

.balance-amount {
	font-size: 48rpx;
	font-weight: bold;
}

.card-number,
.card-validity {
	font-size: 22rpx;
	opacity: 0.8;
	margin-bottom: 10rpx;
}

.card-actions {
	display: flex;
	justify-content: space-around;
	margin-bottom: 40rpx;
}

.action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: white;
	border: none;
	border-radius: 16rpx;
	padding: 30rpx 20rpx;
	color: #333;
	font-size: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	min-width: 180rpx;
}

.action-btn .icon {
	font-size: 48rpx;
	margin-bottom: 15rpx;
}

.benefits-section {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 25rpx;
	display: block;
}

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.benefit-item {
	background: #f8f9fa;
	border-radius: 12rpx;
	padding: 25rpx;
	text-align: center;
}

.benefit-icon {
	font-size: 40rpx;
	display: block;
	margin-bottom: 10rpx;
}

.benefit-name {
	font-size: 24rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.benefit-desc {
	font-size: 20rpx;
	color: #666;
}
</style>